import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    ListView,
    Image,
    TouchableOpacity,
    PixelRatio,
    ScrollView,
    RefreshControl
} from 'react-native';

import GlobalStyles from '../res/styles/GlobalStyles';
import TalentItem from '../component/TalentItem'

class FixedHeaderListView extends Component {

    static defaultProps = {
        filterArray: [],
        itemData: {},
        style: View.propTypes.style,
        talentServiceArray:[]
    }
    constructor(props) {
        super(props);
        var getSectionData = (dataBlob, sectionID) => {
            return dataBlob[sectionID];
        };

        var getRowData = (dataBlob, sectionID, rowID) => {
            return dataBlob[sectionID + ':' + rowID];
        };

        this.state = {
            filterArray: this.props.filterArray,
            itemData: this.props.itemData,
            talentServiceArray:this.props.talentServiceArray,
            dataSource: new ListView.DataSource({
                getSectionData: getSectionData, // 获取组中数据
                getRowData: getRowData, // 获取行中的数据
                rowHasChanged: (r1, r2) => r1 !== r2,
                sectionHeaderHasChanged: (s1, s2) => s1 !== s2
            }),
            refreshing: false
        };
    }

    componentDidMount() {
        this.loadDataFromJason();

    }

    loadDataFromJason() {
        var jsonData = this.props.data;
        var talentService = this.props.talentServiceArray;
        alert(this.props.talentServiceArray);
        var dataBlob = {},
            sectionIDs = [],
            rowIDs = [],
            cars = [];
        for (var i in jsonData) {
            //step 1、把组数据放入sectionIDs数组中
            sectionIDs.push(i);
            console.log(i);
            //step 2、把组中内容放dataBlob对象中
            dataBlob[i] = jsonData[i].title;
            //step 3、取出该组中所有的车
            cars = jsonData[i].cityName;
            //step 4记录每一行中的数据
            rowIDs[i] = [];
            //step 5、获取行中每一组数据
            for (var j in cars) {
                //把行号放入rowIDs中
                rowIDs[i].push(j);
                //把每一行中的内容放dataBlob对象中
                dataBlob[i + ':' + j] = cars[j];
            }
        }

        // 更新状态
        this.setState({
            dataSource: this
                .state
                .dataSource
                .cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs)
        });
    }

    render() {
        return (
            <View style={styles.outerViewStyle}>
                <ListView
                    refreshControl={<RefreshControl refreshing = {this.state.refreshing} />}
                    removeClippedSubviews={false}
                    dataSource={this.state.dataSource}
                    renderRow={this
                    .renderRow
                    .bind(this)}
                    renderSectionHeader={this
                    .renderSectionHeader
                    .bind(this)}/>
            </View>
        );
    }

    // 每一行的数据
    renderRow(rowData) {
        return (
            <TalentItem></TalentItem>
        );
    }

    // 每一组中的数据（过滤栏）
    renderSectionHeader(sectionData, sectionID) {
        var data = [];
        data.push('全部');
        this
            .props
            .filterArray
            .forEach(function (value) {
                data.push(value.techTypeName);
            })
        data.push('其他');
        return (
            <View style={styles.filterBar}>
                <ScrollView
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                    style={{
                    padding: 8,
                    backgroundColor: GlobalStyles.bgColor
                }}>
                    {data.map((item, index) => {
                        return (
                            <TouchableOpacity key={index}>
                                <View style={GlobalStyles.circle}>
                                    <Text
                                        style={{
                                        color: 'white'
                                    }}>{item}</Text>
                                </View>
                            </TouchableOpacity>
                        );
                    })
}
                </ScrollView>
                <View style={GlobalStyles.line}></View>
            </View>
        );
    }

}

// 设置样式
const styles = StyleSheet.create({
    outerViewStyle: {
        //占满窗口
        flex: 1
    },

    headerViewStyle: {
        height: 64,
        backgroundColor: 'blue',
        justifyContent: 'center',
        alignItems: 'center'
    },

    rowStyle: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 10,
        borderBottomColor: 'grey',
        borderBottomWidth: 1 / PixelRatio.get()
    },

    rowImageStyle: {
        width: 70,
        height: 70
    },

    filterBar: {
        justifyContent: 'center'
    }
});

module.exports = FixedHeaderListView;
